<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 组件在路由跳转下的生命周期探究 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="深入探讨Vue-Router在开启与未开启`keepA...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">Vue 组件在路由跳转下的生命周期探究</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">Vue 组件在路由跳转下的生命周期探究</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>四月 25, 2024</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>2942</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
            <p>深入探讨Vue-Router在开启与未开启`keepAlive`特性时，组件生命周期的变化及其背后原理。</p>
          
        
        <h2 id="日志准备：追踪组件生命周期事件"><a href="#日志准备：追踪组件生命周期事件" class="headerlink" title="日志准备：追踪组件生命周期事件"></a>日志准备：追踪组件生命周期事件</h2><p>为了清晰地观察Vue组件在路由切换过程中的生命周期行为，我们在各个关键阶段添加日志输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">beforeCreate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.beforeCreate&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">created</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.created&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeMount</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.beforeMount&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.mounted&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.beforeUpdate&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">updated</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.updated&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeDestroy</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.beforeDestroy&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">destroyed</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;page.destroyed&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="未开启keepAlive：组件的完整生命周期循环"><a href="#未开启keepAlive：组件的完整生命周期循环" class="headerlink" title="未开启keepAlive：组件的完整生命周期循环"></a>未开启<code>keepAlive</code>：组件的完整生命周期循环</h2><h3 id="Router-模板代码（无keepAlive）"><a href="#Router-模板代码（无keepAlive）" class="headerlink" title="Router 模板代码（无keepAlive）"></a>Router 模板代码（无<code>keepAlive</code>）</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;container-vertical&quot;&gt;</span><br><span class="line">      &lt;main class=&quot;main&quot;&gt;</span><br><span class="line">        &lt;router-view/&gt;</span><br><span class="line">      &lt;/main&gt;</span><br><span class="line">      &lt;Sidebar class=&quot;sidebar&quot;/&gt;</span><br><span class="line">      &lt;header class=&quot;header&quot;&gt;</span><br><span class="line">        &lt;Navbar /&gt;</span><br><span class="line">        &lt;Tabsbar /&gt;</span><br><span class="line">      &lt;/header&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h3 id="日志输出与分析"><a href="#日志输出与分析" class="headerlink" title="日志输出与分析"></a>日志输出与分析</h3><h4 id="1-首次打开页面"><a href="#1-首次打开页面" class="headerlink" title="1. 首次打开页面"></a>1. <strong>首次打开页面</strong></h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">page.beforeCreate</span><br><span class="line">page.created</span><br><span class="line">page.beforeMount</span><br><span class="line">page.mounted</span><br><span class="line">page.beforeUpdate</span><br><span class="line">page.updated</span><br></pre></td></tr></table></figure>

<p>首次加载页面时，组件经历了完整的生命周期过程：从创建到挂载，再到首次数据更新。这符合预期，组件初次渲染需经历这些步骤以完成界面展现。</p>
<h4 id="2-切换到其他页面"><a href="#2-切换到其他页面" class="headerlink" title="2. 切换到其他页面"></a>2. <strong>切换到其他页面</strong></h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">page.beforeDestroy</span><br><span class="line">page.destroyed</span><br></pre></td></tr></table></figure>

<p>当用户导航至另一个路由，当前组件被销毁，触发了<code>beforeDestroy</code>和<code>destroyed</code>钩子。这是因为默认情况下，Vue Router在路由切换时会卸载离开路由的组件，释放其资源。</p>
<h4 id="3-页面切回"><a href="#3-页面切回" class="headerlink" title="3. 页面切回"></a>3. <strong>页面切回</strong></h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">page.beforeCreate</span><br><span class="line">page.created</span><br><span class="line">page.beforeMount</span><br><span class="line">page.mounted</span><br><span class="line">page.beforeUpdate</span><br><span class="line">page.updated</span><br></pre></td></tr></table></figure>

<p>当用户返回原页面，组件重新经历完整的生命周期流程，如同首次加载一样。这是因为之前该组件已被销毁，所以再次访问时需要重新创建、挂载和更新。</p>
<h4 id="4-总结"><a href="#4-总结" class="headerlink" title="4. 总结"></a>4. <strong>总结</strong></h4><p>在未启用<code>keepAlive</code>的情况下，路由切换会导致相关组件频繁地创建、销毁，这对于性能敏感或数据状态需持久化的场景可能不够理想。每次跳转都会触发完整的生命周期过程，增加了不必要的计算和DOM操作。</p>
<h2 id="开启keepAlive：组件的缓存与复用"><a href="#开启keepAlive：组件的缓存与复用" class="headerlink" title="开启keepAlive：组件的缓存与复用"></a>开启<code>keepAlive</code>：组件的缓存与复用</h2><h3 id="Router-模板代码（开启keepAlive）"><a href="#Router-模板代码（开启keepAlive）" class="headerlink" title="Router 模板代码（开启keepAlive）"></a>Router 模板代码（开启<code>keepAlive</code>）</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;container-vertical&quot;&gt;</span><br><span class="line">      &lt;main class=&quot;main&quot;&gt;</span><br><span class="line">        &lt;keep-alive&gt;</span><br><span class="line">            &lt;router-view/&gt;</span><br><span class="line">        &lt;/keep-alive&gt;</span><br><span class="line">      &lt;/main&gt;</span><br><span class="line">      &lt;Sidebar class=&quot;sidebar&quot;/&gt;</span><br><span class="line">      &lt;header class=&quot;header&quot;&gt;</span><br><span class="line">        &lt;Navbar /&gt;</span><br><span class="line">        &lt;Tabsbar /&gt;</span><br><span class="line">      &lt;/header&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h3 id="日志输出与分析-1"><a href="#日志输出与分析-1" class="headerlink" title="日志输出与分析"></a>日志输出与分析</h3><h3 id="1-首次打开页面-1"><a href="#1-首次打开页面-1" class="headerlink" title="1. 首次打开页面"></a>1. <strong>首次打开页面</strong></h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">page.beforeCreate</span><br><span class="line">page.created</span><br><span class="line">page.beforeMount</span><br><span class="line">page.mounted</span><br><span class="line">page.beforeUpdate</span><br><span class="line">page.updated</span><br></pre></td></tr></table></figure>

<p>首次加载页面时，组件生命周期表现与未开启<code>keepAlive</code>时相同，仍需经历完整的生命周期过程。</p>
<h4 id="2-切换到其他页面-1"><a href="#2-切换到其他页面-1" class="headerlink" title="2. 切换到其他页面"></a>2. <strong>切换到其他页面</strong></h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">```</span><br><span class="line"></span><br><span class="line">此时控制台没有任何日志输出，表明组件并未触发销毁相关的生命周期钩子。`keepAlive`通过缓存已离开视图但用户可能快速返回的组件，避免了不必要的销毁和重建过程。</span><br><span class="line"></span><br><span class="line">#### 3. **页面切回**</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>&#96;&#96;&#96;</p>
<p>同样，返回原页面时，控制台无日志输出，说明组件没有重新经历创建和挂载等过程。<code>keepAlive</code>直接从缓存中取出已激活的组件，并将其重新插入到DOM中，实现了组件状态的无缝恢复。</p>
<h4 id="4-总结-1"><a href="#4-总结-1" class="headerlink" title="4. 总结"></a>4. <strong>总结</strong></h4><p>开启<code>keepAlive</code>后，路由切换时相关组件不再被立即销毁，而是被缓存起来。当用户返回时，组件能从缓存中快速复用，避免了重复的生命周期过程，提高了页面切换的性能，同时保留了组件的状态。这对于保持用户交互连续性、提升应用响应速度具有显著作用。</p>
<p>综上所述，Vue的<code>keepAlive</code>特性为路由间的组件提供了高效的缓存与复用机制，显著优化了用户体验与应用性能。在实际项目中，应根据业务需求灵活运用<code>keepAlive</code>，特别是在包含大量复杂组件或需要保持用户交互状态的场景中。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2024/04/25/vue-route-lifecycle/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;04&#x2F;25&#x2F;vue-route-lifecycle&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;04&#x2F;25&#x2F;vue-route-lifecycle&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" rel="tag">生命周期</a></li></ul> 

        
  <nav class="nav">
    <a href="/2024/04/26/exiftool-python/"><i class="iconfont iconleft"></i>ExifTool 结合 Python 实现媒体文件创建时间批量自动修改</a>
    <a href="/2024/04/13/ssh-script-hello/">SSH脚本 登录后去除登录的欢迎提示<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A5%E5%BF%97%E5%87%86%E5%A4%87%EF%BC%9A%E8%BF%BD%E8%B8%AA%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E4%BA%8B%E4%BB%B6"><span class="toc-text">日志准备：追踪组件生命周期事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AA%E5%BC%80%E5%90%AFkeepAlive%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%8C%E6%95%B4%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%BE%AA%E7%8E%AF"><span class="toc-text">未开启keepAlive：组件的完整生命周期循环</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Router-%E6%A8%A1%E6%9D%BF%E4%BB%A3%E7%A0%81%EF%BC%88%E6%97%A0keepAlive%EF%BC%89"><span class="toc-text">Router 模板代码（无keepAlive）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E5%BF%97%E8%BE%93%E5%87%BA%E4%B8%8E%E5%88%86%E6%9E%90"><span class="toc-text">日志输出与分析</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%90%AFkeepAlive%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%9A%84%E7%BC%93%E5%AD%98%E4%B8%8E%E5%A4%8D%E7%94%A8"><span class="toc-text">开启keepAlive：组件的缓存与复用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Router-%E6%A8%A1%E6%9D%BF%E4%BB%A3%E7%A0%81%EF%BC%88%E5%BC%80%E5%90%AFkeepAlive%EF%BC%89"><span class="toc-text">Router 模板代码（开启keepAlive）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E5%BF%97%E8%BE%93%E5%87%BA%E4%B8%8E%E5%88%86%E6%9E%90-1"><span class="toc-text">日志输出与分析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%A6%96%E6%AC%A1%E6%89%93%E5%BC%80%E9%A1%B5%E9%9D%A2-1"><span class="toc-text">1. 首次打开页面</span></a></li></ol></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>